<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <!-- 移动端设置不缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title th:text="${blog.title}"></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <!-- 动画 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
        <!-- 目录生成 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
        <link rel="stylesheet" th:href="@{/plugin/typo/css/typo.css}">
        <!-- 代码高亮 -->
        <link rel="stylesheet" href="https://illtamer-web-picture.oss-cn-hangzhou.aliyuncs.com/public/webplugin/prism/prism.css">
        <link rel="stylesheet" th:href="@{/css/common.css}">
        <link rel="stylesheet" th:href="@{/css/detail.css}">
    </head>
    <body>
        <!-- navbar -->
        <nav th:replace="_fragment::navbar(-1)"></nav>
        
        <!-- content -->
        <div class="animate__animated animate__fadeIn">
            <div class="container">
                <div class="row m-container">
                    <div class="col-sm-10 col-sm-offset-1">
                        <div class="panel panel-default">
                            <ul class="list-group">
                                <!-- header -->
                                <li class="list-group-item">
                                    <div class="inline auto-center-src-1">
                                        <img class="user-icon img-thumbnail img-circle" th:src="${blog.user.avatar}" alt="">
                                        <a href="/about" th:text="${blog.user.nick}"></a>
                                    </div>
                                    <div class="inline icon-margin">
                                        <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
                                        <span th:text="${blog.views}"></span>
                                    </div>
                                    <div class="inline li-center auto-center-target-1 pull-right">
                                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                        <span th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                    </div>
                                </li>
                                <!-- image -->
                                <li class="list-group-item">
                                    <img class="center-block img-rounded img-responsive" th:src="${blog.cover}" alt="">
                                </li>
                                <!-- content -->
                                <li class="content list-group-item">
                                    <!-- title -->
                                    <h2>[[${blog.title}]] <span class="label label-default" th:text="${blog.flag == 0 ? '原创' : '转载'}"></span></h2>
                                    <!-- text -->
                                    <div class="typo typo-selection line-numbers" id="tools-bar-content" th:utext="${blog.content}"></div>
                                    <!-- label -->
                                    <div class="label-style">
                                        <a th:href="@{/tags(tagId=${tag.id})}" th:each="tag: ${blog.tags}" th:text="${tag.name}" class="label label-success"></a>
                                    </div>
                                    <!-- reward -->
                                    <div th:if="${blog.appreciation}" class="center">
                                        <div class="btn-group reward">
                                            <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">赞赏<span class="caret"></span></button>
                                            <div class="dropdown-menu reword-qrcode">
                                                <img class="inline" th:src="@{/image/wepay.jpg}"/>
                                                <img class="inline" th:src="@{/image/alpay.jpg}"/>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!-- message -->
                                <li th:if="${blog.shareStatement}" class="list-group-item info-bg">
                                    <div class="row">
                                        <div class="col-sm-8 auto-center-target-2 text-success info-padding">
                                            <ul>
                                                <li>作者: [[${blog.user.nick}]]<a href="/about">(联系作者)</a></li>
                                                <li>发布时间: [[${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</li>
                                                <li>版权声明: AGPLv3</li>
                                                <li>版权声明: 自由转载-非商用</li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4">
                                            <img class="qrcode pull-right auto-center-src-2" src="../static/image/wechat_qrcode.png" alt="">
                                        </div>
                                    </div>
                                </li>
                                <!-- comment show -->
                                <li th:if="${blog.commentable}" class="list-group-item" id="comment-show">
                                    <div th:fragment="commentList" class="panel panel-default">
                                        <div class="panel-heading">
                                            评论区
                                        </div>
                                        <div class="panel-body">
                                            <!--/*@thymesVar id="comment" type="com.illtamer.infinite.sillage.pojo.Comment"*/-->
                                            <div th:each="comment: ${comments}" class="comment">
                                                <!-- top -->
                                                <div class="comment-body">
                                                    <div class="row">
                                                        <div class="col-xs-1">
                                                            <img th:src="${comment.avatar}" alt="">
                                                        </div>
                                                        <div class="col-xs-11">
                                                            <a class="author" href="#"><span th:text="${comment.nick}"></span></a>
                                                            <span th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                                            <div th:text="${comment.content}"></div>
                                                            <a class="reply" th:attr="data-parent-id=${comment.id}, data-parent-nick=${comment.nick}" onclick="reply(this)">回复</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- son -->
                                                <div th:each="sonComment: ${comment.sonComment}" class="comment-reply">
                                                    <div class="comment-body">
                                                        <div class="row">
                                                            <div class="col-xs-1">
                                                                <img th:src="${sonComment.avatar}" alt="">
                                                            </div>
                                                            <div class="col-xs-11">
                                                                <a class="author" href="#"><span th:text="${sonComment.nick}"></span><span th:text="' @' + ${sonComment.parentComment.nick}" class="at"></span></a>
                                                                <span th:text="${#dates.format(sonComment.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                                                <div th:text="${sonComment.content}"></div>
                                                                <a class="reply" th:attr="data-parent-id=${sonComment.id}, data-parent-nick=${sonComment.nick}" onclick="reply(this)">回复</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- submit comment -->
                        <div th:if="${blog.commentable}" class="row">
                            <div class="contact-box text-center">
                                <div id="comment">
                                    <input type="hidden" id="blogId" th:value="${blog.id}">
                                    <input type="hidden" id="parentCommentId">
                                    <div class="form-group row">
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="nick" placeholder="昵称*" required="">
                                        </div>
                                        <div class="col-sm-6">
                                            <input type="email" class="form-control" id="email" placeholder="Email* ( Use to connect )" required="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <textarea class="form-control" id="content" rows="4" placeholder="内容*" required=""></textarea>
                                    </div>
                                    <button id="comment-submit" class="btn-block" type="submit">评论</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- tools bar -->
        <div>
            <div class="btn-group-vertical tools-bar" role="group" aria-label="Vertical button group">
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目录</button>
                    <div class="dropdown-menu toc pull-right" id="tools-bar-topic"></div>
                </div>
                <a class="btn btn-default" href="#comment-show">评论</a>
                <div class="btn btn-default" id="toTop"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></div>
            </div>
        </div>

        <!-- footer -->
        <footer th:replace="_fragment::footer"></footer>

        <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.min.js"></script>
        <!-- jQuery 平滑滚动插件 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
        <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
        <script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
        <script src="https://illtamer-web-picture.oss-cn-hangzhou.aliyuncs.com/public/webplugin/prism/prism.js"></script>
        <script th:src="@{/js/common.js}"></script>
        <script th:src="@{/js/detail.js}"></script>
    </body>
</html>